 <template>
  <el-container>
    <el-main>
      <el-row class="table-wrapper" v-if="role === 'SUPER_ADMIN'">   
        <el-col :span='24'>  
          <el-form ref="form" :model="form" :inline="true">
            <el-form-item label="分站">
              <el-select v-model="form.namespace" placeholder="分站名称">
                <el-option
                  v-for="site in allSites"
                  :key="site.namespace"
                  :label="site.namespaceDesc"
                  :value="site.namespace">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="等级名称"> 
              <el-input v-model="form.levelName" placeholder="等级名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="等级排名">
              <el-input v-model="form.levelRank" placeholder="等级排名" clearable></el-input>
            </el-form-item>
            <el-form-item label="等级说明">
              <el-input v-model="form.levelDesc" placeholder="等级说明" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      
      <div class="table_container">
        <el-table
            :data="levels"
            v-loading="tableLoading"
            highlight-current-row
            style="width: 100%">
            
            <el-table-column
              property="id"
              label="序号"
              width="130">
            </el-table-column>
            <el-table-column
              property="namespace"
              label="分站"
              width="150">
            </el-table-column>
            <el-table-column
              property="levelName"
              label="等级名称"
              width="130">
            </el-table-column>
            <el-table-column
              property="levelRank"
              label="等级排名"
              width="130">
            </el-table-column>
            <el-table-column
              property="levelDesc"
              label="等级说明"
              width="180">
            </el-table-column>
            <el-table-column
                label="状态"
                width="130">
                <template slot-scope="scope">
                  <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status !== "ENABLE"'>生效</el-button>
                  <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status === "ENABLE"'>失效</el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 80, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import {getAllLevel, createLevel, updateLevel} from '@/api/level'
  import {allSite} from '@/api/site'
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        form: {
          namespace: '',
          levelName: '',
          levelRank: '',
          levelDesc: ''
        },
        currentNamespace: '',
        levels: [],
        currentPage: 1,
        limit: 20,
        total: 0,
        tableLoading: false
      }
    },
    computed: {
      ...mapState('manage', ['allSites']),
      ...mapState(['role'])
    },
    watch: {
      currentNamespace: function (newNamespace, oldNamespace) {
        this.getAllLevel()
      }
    },
    mounted () {
      this.initData()
    },

    methods: {
      async initData () {
        this.getAllLevel()
      },
      async getAllLevel () {
        this.tableLoading = true
        try {
          let result = await getAllLevel({namespace: this.currentNamespace})

          if (result.status === 200 && result.data.code === 200) {
            this.levels = result.data.data
            this.total = result.data.page.total
          } else {
            throw new Error('获取数据失败')
          }
        } catch (err) {
          // this.$message.error('获取数据失败')
          console.log('获取数据失败', err)
        }
        this.tableLoading = false
      },
      async createLevel () {
        let loading = this.$loading({
          lock: true,
          text: '正在加载',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
          let result = await createLevel(this.form)
          if (result.status === 200 && result.data.code === 200) {
            this.getAllLevel()
          } else {
            throw new Error('创建等级失败')
          }
        } catch (err) {
          console.log('创建等级失败', err)
        } finally {
          loading.close()
        }
      },
      onSubmit () {
        this.createLevel()
      },
      async updateLevel (level) {
        let loading = this.$loading({
          lock: true,
          text: '正在加载',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
          let result = await updateLevel({
            id: level.id,
            status: level.status === 'ENABLE' ? 'CANCELED' : 'ENABLE'
          })
          if (result.status === 200 && result.data.code === 200) {
            this.getAllLevel()
          } else {
            throw new Error('创建等级失败')
          }
        } catch (err) {
          console.log('创建等级失败', err)
        } finally {
          loading.close()
        }
      },
      updateStatus (level) {
        this.updateLevel(level)
      },
      handleSizeChange (size) {
        this.limit = size
        this.getAllLevel()
      },
      handleCurrentChange (page) {
        this.currentPage = page
        this.getAllLevel()
      },

    }
  }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .label-title{
        font-weight: bold;
        font-size: 24px;
        color: #ff633b;
        margin: 30px;
    }
    .manage_tip {
      margin-bottom: 10px;
    }
    .introduct{
        width: 900px;
        text-align: center;
        margin: auto;
    }
    .tip {
        font-size: 12px;
    }
    .tip strong {
        color: red;
        font-weight: bold;
    }
    // .el-button {
    //   width: 200px;
    //   margin: auto;
    //   display: block;
    // }
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .batch-dialog{
    }
    .batch-table{
        max-height: 400px;
        overflow: auto;
    }
</style>

 